<script>
export default {
  name: "index",
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: {
      type: [ String, Number],
      default: ''
    },
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    placeholder: {
      type: String,
      default: ''
    },
    props: {
      type: Object,
      default: () => {
        return {
          label: 'label',
          value: 'value',
        }
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      visible: false,
    }
  },
  computed: {
    _value: {
      get() {
        return this.$props.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    },
    selected() {
      return this.options.find(item => item[this.$props.props.value] === this._value)
    }
  },
  methods: {
    confirm(item) {
      this._value = item.value[0][this.$props.props.value];
      this.visible = false;
      this.$emit('change', item.value[0]);
    },
    change(item) {
      this.$emit('change', item.value[0]);
    },
  }
}
</script>

<template>
  <view>
    <view v-if="disabled" class="disabled">{{ selected && selected[props.label] || '未填写'}}</view>
    <view v-else class="value" @click="visible = true">
      <view v-if="selected && selected[props.label]">{{ selected && selected[props.label] }}</view>
      <view class="placeholder" v-else>{{ placeholder || '请选择'}}</view>
    </view>
    <u-picker
        :show="visible"
        :columns="[options]"
        :keyName="props.label"
        @confirm="confirm"
        @cancel="visible = false"
        @change="change"
    ></u-picker>
  </view>
</template>

<style scoped lang="scss">
.value{
  font-size: 15px;
  .placeholder{
    color: #bbb;
  }
}
.disabled{
  font-size: 15px;
  color: #888;
}
</style>
